<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <header>
        <div class="box">
            <ul>
                <li>这是li01</li>
                <li>这是li02</li>
                <li>这是li03</li>
                <li>这是li04</li>
                <li>这是li05</li>
            </ul>
        </div>
        <ul>
            <li>lili01</li>
            <li>lili02</li>
            <li>lili03</li>
            <li>lili04</li>
            <li>lili05</li>
        </ul>
    </header>
    <script>
        // jQuery 是一个 JavaScript 库。
        // console.log(jQuery); //函数对象
        // console.log($); //函数对象
        // $ === jQuery 

        // var num = 10;
        // num.toFixed();

        // jquery获取的标签不可以直接使用js中dom的属性和方法
        // js中dom获取的标签也不可以使用jquery中的属性和方法

        //获取的标签叫jQuery对象
        //$("选择器")会查找到所有符合选择器的标签 一个或多个
        console.log($("header"));
        console.log($("header,.box"));
        console.log($(".box li"));

        console.log($(".box li:first")); //找到第一个li
        console.log($(".box li").first());

        console.log($(".box li:last")); // 找到第eq(n)中索引值n为n的li标签
        console.log($(".box li").last());// 找到第eq(n)中索引值n为n的li标签

        console.log($(".box li:lt(2)"));// 获取小于参数索引值的标签 找的是 0 1

        console.log($(".box li:gt(2)"));//获取大于参数索引值的标签 找的是3 4

        console.log($(".box li:eq(2)"));//找到第eq(n) 中索引值n为n的li标签
        // .eq(index) 获取第index个li标签 获取的还是jquery对象
        console.log($(".box li").eq(3));

        var lis = document.querySelectorAll("li");
        console.log(lis);
        console.log(lis[0]);
        // lis[0].innerHTML = "内容";

        // 可以将jquery对象转换成dom对象
        // console.log($("header")[0]);
        // console.log($("header").get(0)); 
        // $("header")[0].innerHTML = "内容"

        // $(dom对象) 将dom对象转换成jquery对象
        console.log($(lis[0]));


    </script>
</body>

</html>